<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>登录框特效</title>
  <style type="text/css">
    body {
      width: 915px;
      margin: 0px auto;
      background: url(images/back.jpg);
      font-size: 14px;
    }

    td {
      height: 35px;
      line-height: 30px;
    }

    .right {
      text-align: right;
    }

    .center {
      text-align: center;
    }

    .border {
      border: 1px solid #000;
      color: #CCC;
    }
  </style>
  <script type="text/javascript" src="js/jquery-1.12.4.js">
  </script>
  <script type="text/javascript">
    $(function () {

      //  获得焦点时
      $("#address").focus(function () { //地址框获得光标焦点
        $(this).css("color", "#000"); //设置文本框文字颜色为为黑色
        var txt_value = $(this).val(); //得到当前文本框的值
        if (txt_value == this.defaultValue) //如果上面的字是灰色的那几个字则
        {
          $(this).val(""); //则为空
        }
        //  地址栏失去焦点时
      });


      $("#address").blur(function () {
        var txt_value = $(this).val(); //取到文本框的值
        if (txt_value == "") {
          $(this).val(this.defaultValue); //符合条件则设置内容
          $(this).css("color", "#ccc");
        }
      })


      $("#password").focus(function () { //地址框获得光标焦点
        $(this).css("color", "#000"); //设置文本框文字颜色为为黑色
        var txt_value = $(this).val(); //得到当前文本框的值
        if (txt_value == this.defaultValue) //如果上面的字是灰色的那几个字则(是否是空)
        {
          $(this).val(""); //则为空
        }
        //  地址栏失去焦点时
      });

      $("#password").blur(function () {
        var txt_value = $(this).val(); //取到文本框的值
        if (txt_value == "") {
          $(this).val(this.defaultValue); //符合条件则设置内容
          $(this).css("color", "#ccc");
        }
      })




    });
  </script>
</head>

<body>
  <div id="top"><img src="images/image1.jpg" /></div>
  <h3>首页—登录</h3>
  <table width="30%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="right">用户名：</td>
      <td><input type="text" id="address" value="请输入邮箱地址" class="border" /></td>
    </tr>
    <tr>
      <td class="right">密&nbsp;&nbsp;码：</td>
      <td><input type="text" id="password" value="请输入邮箱密码" class="border" /></td>
    </tr>
    <tr>
      <td colspan="2" class="center"><input type="button" value="登  陆" /></td>

    </tr>
  </table>

</body>

</html>